<template>
    <div class="renz_info">
		<div class="header">
			<van-nav-bar
			title="企业认证"
            left-arrow
            @click-left="onClickLeft"
			/>
		</div>
        <div class="renz_con">
  

            <input type="text" placeholder="请输入和营业执照一致的企业名称" v-model="enter" readonly>
            <h3>企业职能（可多选）</h3>
            <p>
            <button class="{'isActive':fu | filterAa(0)}">分类收集</button>
            <button class="{'isActive2':functions | filterAa(1)}">分类运输</button>
            <button class="{'isActive3':functions| filterAa(2)}">分类处理</button>
            </p>
            <h3>企业证件</h3>

          <div style="width:100%;height:16vh;display:flex;justify-content: space-between; margin-bottom:5px;margin-top:5px;">
            <img :src="busLiceUrl" style="width: 49%;height:100%;"/>
            <img :src="openingPermitUrl" style="width: 49%;height:100%;"/>
          </div>
          <div style="width:100%;height:16vh;display:flex;justify-content: space-between;margin-bottom:5px;">
            <img :src="idPositiveUrl" style="width: 49%;height:100%;"/>
            <img :src="idReverseUrl" style="width: 49%;height:100%;"/>
          </div>
          <div style="width:100%;height:16vh;display:flex;justify-content: space-between;margin-bottom:5px;">
            <img :src="invoiceUrl" style="width: 49%;height:100%;"/>
            <img :src="sealUrl" style="width: 49%;height:100%;"/>
          </div>

        </div>

	</div>
</template>
<script>
export default {
    data() {
        return {
            idPositive: [],
            idReverse:[],

            jname: '',
            showPicker: false,
            columns: ['机构名称1', '机构名称2', '机构名称3', '机构名称4'],

            enter:'',
            fu:'',
            busLiceUrl:'',
            openingPermitUrl:'',
            idPositiveUrl:'',
            idReverseUrl:'',
            invoiceUrl:'',
            sealUrl:'',

        }
    },
    mounted:function(){
        const that = this;
        let local_user = localStorage.getItem("user");
        if (local_user != undefined && local_user != "undefined") {
            let user = JSON.parse(local_user);
            that.user = user;
            that.get_real_auth_info();
        }
    },
    filters:{
    	filterAa(fu,v){
            if(fu.indexOf(v) >= 0){
                return true;
            }else{
                return false;
            }
        }
    },
    methods:{
        onClickLeft() {
	        this.$router.back(-1);
		},
        get_real_auth_info() {
            const that = this;
            that.$sendRequest("/enterRegister/get_real_auth_info", "userId=" + that.user.userId)
                .then(function(res) {
                    console.log(res);
                    if (res.data.code == 0) {
                        that.enter = res.data.result.enter;
                        that.fu = res.data.result.functions;
                        that.busLiceUrl = res.data.result.busLiceUrl;
                        that.openingPermitUrl = res.data.result.openingPermitUrl;
                        that.idPositiveUrl = res.data.result.idPositiveUrl;
                        that.idReverseUrl = res.data.result.idReverseUrl;
                        that.invoiceUrl = res.data.result.invoiceUrl;
                        that.sealUrl = res.data.result.sealUrl;
                    }
                });
        },


        afterReadPositive(file) {
            const that = this;
            let formData = new FormData();
            formData.append("fileName",file.file);
            that.$sendFileRequest('/comm/upload',formData).then(function(res){
                if(res.data.code ==0){
                    that.idPositiveUrl = res.data.result.relativeFilePath;
                    alert(that.idPositiveUrl)
                }
            })
        },
        afterReadReverse(file) {
            const that = this;
            let formData = new FormData();
            formData.append("fileName",file.file);
            that.$sendFileRequest('/comm/upload',formData).then(function(res){
                if(res.data.code ==0){
                    that.idReverseUrl = res.data.result.relativeFilePath;
                    alert(that.idReverseUrl)
                }
            })
        },
        onConfirm(value) {
          this.jname = value;
          this.showPicker = false;
          console.log(this.jname);
      },
    }
}
</script>
<style scoped="scoped">
    .isActive1{
      background: #4C9FFD;
      color:#fff;
      border-color:#4C9FFD;
    }
    .isActive2{
      background: #4C9FFD;
      color:#fff;
      border-color:#4C9FFD;
    }
    .isActive3{
      background: #4C9FFD;
      color:#fff;
      border-color:#4C9FFD;
    }

    .clear{
        clear: both;
    }
    .renz_info{
        height: 100vh;
        background-color: #fff;
    }
	.header>>>.van-cell__title{
		  width: 63px !important;
	}
	.header >>> .van-icon-arrow-left{
		color: #2e3c50;
	}
    .van-nav-bar__title{
        color: #000000;
    }
    .renz_con{
        width: 100vw;
        box-sizing: border-box;
        padding:2vh 2vw;
    }

    .renz_con input{
        width: 88%;
        height: 6vh;
        border: 1px solid #999999;
        border-radius: 4px;
        padding: 0 2%;
        margin-bottom: 2vh;
        font-size: 0.8rem;
    }
    .renz_con .inpone{
        width: 92%;
        height: 6vh;
        border: 1px solid #999999;
        border-radius: 4px;
        margin-bottom: 2vh;
        margin-left: 4%;
        font-size: 0.8rem;
    }
    .renz_con h3{
        margin: 0 2%;
        font-size: 0.98rem;
        text-align: left;
    }
    .renz_con p{
        margin: 1.5vh 1%;
        font-size: 1rem;
        text-align: left;
        display: flex;
        justify-content: space-around;
    }
    .renz_con p button{
        width: 28%;
        height: 5.5vh;
        border: 1px solid #999999;
        border-radius: 4px;
        padding: 0 2%;
        font-size: 0.8rem;
        color: #999;
        background-color: #fff;
    }

    .uploader_img{
		height: 14vh;
		display: flex;
		justify-content: space-between;
		margin: 12px;
        margin-top: 1vh;
	}
	.uploader_img >>> .van-uploader{
		height: 100%;
	}
	.uploader_img >>> .van-uploader__wrapper{
		height: 100%;
	}
	.uploader_img>>>.van-uploader__upload:first-child{
		background: url(../../assets/zhizhao1.png) no-repeat center center;
	    background-size: cover;
	    height: 100%;
	}
    .uploader_imgs>>>.van-uploader__upload:first-child{
		background: url(../../assets/zhizhao2.png) no-repeat center center;
	    background-size: cover;
	    height: 100%;
	}
    .uploader_imges>>>.van-uploader__upload:first-child{
		background: url(../../assets/zhizhao3.png) no-repeat center center;
	    background-size: cover;
	    height: 100%;
	}
	.uploader_img >>> .van-icon-plus{
		display: none;
	}
	.uploader_img >>> .van-image{
		width: 100%;
		height: 100%;
	}
	.uploader_img >>>.van-uploader{
		width: 50%;
	}
	.uploader_img>>>.van-uploader__upload{
		width: 100%;
	}

    .renz_foot{
        width: 100%;
        position:fixed;
        bottom: 0;
    }
    .renz_foot >>>.van-button{
        width: 100%;
    }
</style>

